<template>
  <div>
    <div class="rightas">
      <div class="phonePic">
        <img
          src="../../assets/images/phoneTop.png"
          style="width: 100%"
          alt=""
        />
        <div class="titles">首页</div>
        <div class="cont">
          <div class="phoneBannere">
            <div class="block" :class="activeName == 'first' ? 'active2' : ''">
              <el-carousel height="150px">
                <el-carousel-item v-for="item in 4" :key="item">
                  <h3 class="small">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!-- 收益统计 -->
          <div class="profit">
            <div class="subTitle"><span class="line"></span> 收益统计</div>
            <div class="moneys"><span class="yuan">6289.10</span>元</div>
            <div class="titleTxt">
              <span class="first">本月开通终端 122台</span>
              <span>本月伙伴新增 666人</span>
            </div>
          </div>
          <!-- 功能菜单 -->
          <div
            class="phoneMenu"
            :class="activeName == 'second' ? 'active2' : ''"
          >
            <div class="subTitle" style="margin-bottom: 10px">
              <span class="line"></span> 功能
            </div>
            <div class="menuList">
              <div class="subList" v-for="(item, index) in 9" :key="index">
                <div class="pic"></div>
                <div class="picTitle">描述</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <img
            src="../../assets/images/footerNav.png"
            style="width: 100%; height: 40px"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.boxera1 {
  display: flex;
  width: calc(100% - 20px);
  height: calc(100vh - 126px);
  overflow: hidden;
}
/deep/ .el-tabs__item{
  font-size: 16px;
}
.active2{
  border: 2px solid #409EFF;
}
.left {
  width: calc(100% - 400px);
  height: calc(100vh - 100px);
  overflow-y: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 0 20px;
}
.rightas {
  width: 400px;
  background: #ebeef5;
  position: relative;
  overflow-y: scroll;
}
.phonePic {
  
  width: 350px;
  background: white;
  box-sizing: border-box;
  margin: 0 auto;
}
.titles {
  font-weight: bold;
  text-align: center;
  padding: 10px 0;
  width: 100%;
}
.cont {
  background: rgb(246, 246, 246);
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-top: 10px;
}
.phoneBannere {
  background: #ccc;
  height: 150px;
  margin-bottom: 10px;
}
.moneys {
  margin: 4px 0;
}
.yuan {
  font-size: 22px;
  font-weight: 600;
  color: rgb(238, 96, 88);
}
.first {
  display: inline-block;
  margin-right: 20px;
}
.profit {
  background: white;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 8px;
}
.phoneMenu {
  background: white;
  margin-top: 20px;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 8px;
  margin-bottom: 20px;
}
.subList {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}
.menuList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pic {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
  margin: 0 auto;
}
.picTitle {
  text-align: center;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.leftTop {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  padding: 0 20px;
}
.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: ".";
  visibility: hidden;
}
</style>